<template>
  <div id="main">
      <div v-for="bloglist in bloglists" :key="bloglist.blog.hash">
        <router-link :to="{path:'/archive/'+bloglist.blog.hash}">>>{{bloglist.blog.title}}</router-link>
        <div v-html="bloglist.blog.abs"></div>
        <router-link :to="{path:'/archive/'+bloglist.blog.hash}">more>></router-link>
      </div>
      <router-link v-if="before" :to="(Number(this.$route.params.id)-1).toString()" @click.native="chageurl()">before</router-link>
      <router-link v-if="next" :to="(Number(this.$route.params.id)+1).toString()" @click.native="chageurl()">next</router-link>
  </div>
</template>

<script>
import marked from "marked";
export default {
  data() {
    return {
      bloglists: [],
      next: false,
      before: false,
      blogsbuffer: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.chageurl();
    },
    chageurl: function() {
      var that = this;
      this.$http({
        method: "get",
        url:
          "https://api.github.com/repos/FireUnicornser/govBlog/issues?creator=FireUnicornser&page=" +
          that.$route.params.id +
          "&per_page=10"
      }).then(function(response) {
        that.blogsbuffer = response.data;
        if (Number(that.$route.params.id) <= 1) {
          that.before = false;
        } else {
          that.before = true;
        }
        var next = Number(that.$route.params.id) * 10  + 1;
        that
          .$http({
            method: "get",
            url:
              "https://api.github.com/repos/FireUnicornser/govBlog/issues?creator=FireUnicornser&page=" +
              next +
              "&per_page=1"
          })
          .then(function(response) {
            if (response.data.length == 0) {
              that.next = false;
            } else {
              that.next = true;
            }
            that.chagelist();
          });
      });
    },
    chagelist: function() {
      this.bloglists = [];
      for (var i = 0;i<this.blogsbuffer.length;i++) {
        this.bloglists.push ({
          blog:{
            hash:this.blogsbuffer[i]['number'],
            title:this.blogsbuffer[i]['title'],
            abs:marked(this.blogsbuffer[i]['body'].substring(0,100)+".....")
          }
        })
      }
    }
  }
};
</script>

<style>

</style>
